import React from 'react'
import { Tabbars } from '../../router/router'
import { Tabbar } from 'react-vant';
import { Outlet } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import styles from './my.module.css'
function Index() {
   const nav = useNavigate()
   const location = useLocation()
   
   // 创建带有激活状态的图标
   const createIconWithActiveState = (icon: React.ReactNode, path: string) => {
     if (React.isValidElement(icon) && typeof icon.type === 'function' && icon.type.name === 'ChunyuIcon') {
       return React.cloneElement(icon as React.ReactElement<{ isActive?: boolean }>, { isActive: location.pathname === path })
     }
     return icon
   }
   
  return (
    <div className={styles.dhz}>
      <main>
           <Outlet />
      </main>
      <footer>
           <Tabbar 
             onChange={(key: string | number)=>nav(String(key))}
             activeColor="#34C759"
             inactiveColor="#999999"
           >
        {
          Tabbars && Tabbars.map((item) => {
            return <Tabbar.Item key={item.path} icon={createIconWithActiveState(item.icon, item.path)} name={item.path}>{item.title }</Tabbar.Item>
           })
        }
      </Tabbar>
   </footer>
   
    </div>
  )
}

export default Index
